<template>
  <div>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="show">
      <h3 style="text-align: center; color: #fff">
        {{ show ? "后台" : "北king管理系统" }}
      </h3>

      <el-menu-item index="1" @click="sclick">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="2" @click="sjclick">
        <i class="el-icon-medal-1"></i>
        <span slot="title">数据大屏</span>
      </el-menu-item>

      <el-menu-item index="3" @click="goodsclick">
        <i class="el-icon-shopping-cart-full"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="4" @click="dingdanclick">
        <i class="el-icon-truck"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>
      <el-menu-item index="5" @click="userclick">
        <i class="el-icon-user"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-loading"></i>
          <span slot="title">设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="guanliclick">
            <i class="el-icon-key"></i>
            用户密码管理
          </el-menu-item>

          <el-menu-item index="1-2" @click="systemclick">
            <i class="el-icon-setting"></i>
            系统参数
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "cdao",

  components: {},
  props: {
    show: false,
  },

  data() {
    return {};
  },

  created() { },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    sjclick() {
      this.$router.push("/screen");
      this.$store.commit("addrouterlist", {
        name: "数据大屏",
        path: "/screen",
        type: "",
      });
    },
    sclick() {
      this.$router.push("/home");
      this.$store.commit("addrouterlist", {
        name: "首页",
        path: "/home",
        type: "",
      });
    },
    goodsclick() {
      this.$router.push("/goods");
      this.$store.commit("addrouterlist", {
        name: "商品管理",
        path: "/goods",
        type: "",
      });
    },
    userclick() {
      this.$router.push("/user");
      this.$store.commit("addrouterlist", {
        name: "用户管理",
        path: "/user",
        type: "",
      });
    },
    dingdanclick() {
      this.$router.push("/dingdan");
      this.$store.commit("addrouterlist", {
        name: "订单管理",
        path: "/dingdan",
        type: "",
      });
    },
    guanliclick() {
      this.$router.push("/guanli");
      this.$store.commit("addrouterlist", {
        name: "用户密码管理",
        path: "/guanli",
        type: "",
      });
    },
    systemclick() {
      this.$router.push("/system");
      this.$store.commit("addrouterlist", {
        name: "系统参数",
        path: "/system",
        type: "",
      });
    },
    qitaclick() {
      this.$router.push();
    },
  },
};
</script>

<style scoped lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;

  h3 {
    text-align: center;
    color: white;
  }

  span {
    font-size: 15px;
  }
}

.el-menu--collapse {
  height: 100vh;
}
</style>